<template>
  <div
    v-if="category === 'pattern'"
    style="background-color: #fff; padding: 10px"
  >
    <svg
      width="360"
      height="120"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <filter id="blend">
          <feImage
            xlink:href="./pattern.jpg"
            result="patternSource"
            x="0"
            y="0"
            width="360"
            height="120"
          />
          <!-- IE浏览器不支持overly混合模式，可使用multiply替代 -->
          <!-- <feBlend mode="overlay" in="SourceGraphic" in2="patternSource" /> -->
          <feBlend mode="multiply" in="SourceGraphic" in2="patternSource" />
        </filter>
        <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" :stop-color="gradient[0]" />
          <stop offset="60%" :stop-color="gradient[1]" />
          <stop offset="90%" :stop-color="gradient[2]" />
        </linearGradient>
        <pattern
          id="pattern"
          width="360"
          height="120"
          patternUnits="userSpaceOnUse"
        >
          <rect
            x="0"
            y="0"
            width="100%"
            height="100%"
            fill="url(#gradient)"
            filter="url(#blend)"
          ></rect>
        </pattern>
      </defs>
      <text
        x="0"
        y="60"
        dy="20"
        font-family="Microsoft Yahei"
        text-anchor="left"
        :font-size="fontSize"
        font-weight="900"
        fill="url(#pattern)"
      >
        {{ content }}
      </text>
    </svg>
  </div>
  <div
    v-else
    :class="category"
    :style="`background:${background};text-align:${textAlign};height:${height}`"
    class="wrapper"
  >
    <strong :style="`font-size:${fontSize};color:${color};`">{{
      content
    }}</strong>
  </div>
</template>

<script setup lang="ts">
// 模块引入
// import { useTemplateRef, onMounted } from 'vue'
defineOptions({
  // 组件名称
  name: 'TitleTag',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})

type ICategory =
  | 'shining'
  | 'circle'
  | 'vertical'
  | 'default'
  | 'nose'
  | 'wave'
  | 'innerWave'
  | 'pattern'
type ITextAlign = 'left' | 'center' | 'right'
interface IProps {
  category?: ICategory
  content?: string
  fontSize?: string | number
  background?: string
  color?: string
  textAlign?: ITextAlign
  height?: string
  width?: string
  gradient?: Array<string>
}
withDefaults(defineProps<IProps>(), {
  category: 'default',
  fontSize: '20px',
  color: 'transparent',
  background: 'transparent',
  content: '标题',
  textAlign: 'left',
  height: 'auto',
  width: '100%',
  gradient: () => ['gold', 'red', 'blue']
})
// const cvsRef = useTemplateRef<HTMLCanvasElement>('cvs')
</script>

<style scoped lang="scss">
.wrapper {
  width: 100%;
  line-height: 1.5;
  &.shining {
    position: relative;
    color: transparent;
    background-image: linear-gradient(
      90deg,
      #ff0000,
      #ffff00,
      #00ff00,
      #00ffff,
      #0000ff,
      #ff00ff,
      #ff0000
    );
    background-size: 200%;
    background-clip: text;
    animation: shine 5s linear infinite;
  }
  &.default {
    line-height: 1.5;
  }
  &.vertical {
    position: relative;
    border-left: 4px solid;
    padding: 0 0 0 10px;
    margin: 30px 0;
  }
  &.circle {
    margin: 24px 0;
    font-weight: bold;
    position: relative;
    padding: 4px 32px;
    width: max-content;
    &:hover {
      &::before {
        animation: animateBefore 2s infinite alternate;
      }
      &::after {
        animation: animateAfter 2s infinite alternate;
      }
    }
    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 0;
      margin: auto;
      display: block;
      background-image: url(@/assets/images/title1.png);
      background-size: 28px 28px;
    }
    &::before {
      left: 0;
      bottom: 2px;
      width: 100%;
      border-bottom: 2px solid;
      background-repeat: no-repeat;
    }
    &::after {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2px solid;
      right: -14px;
      bottom: 0;
    }
  }
  &.nose {
    strong {
      background:
        repeating-radial-gradient(#000 0 0.0001%, #fff 0 0.0002%) 50% 0/2500px
          2500px,
        repeating-conic-gradient(#000 0 0.0001%, #fff 0 0.0002%) 50% 50%/2500px
          2500px;
      background-blend-mode: difference;
      mix-blend-mode: lighten;
      -webkit-background-clip: text;
      background-clip: text;
    }
  }
  &.wave {
    padding: 10px 0;
    user-select: none;
    strong {
      text-underline-offset: 10px;
      &:hover,
      &:focus {
        background:
          radial-gradient(
              circle at 10px -7px,
              transparent 8px,
              currentColor 8px,
              currentColor 9px,
              transparent 9px
            )
            repeat-x,
          radial-gradient(
              circle at 10px 27px,
              transparent 8px,
              currentColor 8px,
              currentColor 9px,
              transparent 9px
            )
            repeat-x;
        background-size: 20px 20px;
        background-position:
          -10px calc(100% + 16px),
          0 calc(100% - 4px);
        animation: waveFlow 1s infinite linear;
      }
    }
  }
  &.innerWave {
    strong {
      font-family: system-ui, sans-serif;
      font-size: 7rem;
      max-width: 800px;
      --c1: #2e88c7;
      --c2: #9ccce8;

      --_p: 93% 83.5% at;
      --_g1: radial-gradient(var(--_p) bottom, var(--c1) 79.5%, #0000 80%)
        no-repeat;
      --_g2: radial-gradient(var(--_p) top, #0000 79.5%, var(--c1) 80%)
        no-repeat;
      --_g3: radial-gradient(var(--_p) bottom, var(--c2) 79.5%, #0000 80%)
        no-repeat;
      --_g4: radial-gradient(var(--_p) top, #0000 79.5%, var(--c2) 80%)
        no-repeat;
      background: var(--_g1), var(--_g2), var(--_g1), var(--_g2), var(--_g3),
        var(--_g4), var(--_g3), var(--_g4);
      -webkit-background-clip: text;
      background-clip: text;
      color: #0000;
      -webkit-text-stroke: 0.2rem var(--c1);
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      animation:
        s 2s infinite alternate,
        m 3s infinite linear;
    }
  }
}

// .pattern-overlay {
//   // position: relative;
//   font-family: 'microsoft yahei';
//   background-image: url(@/assets/images/pattern.jpg);
//   -webkit-text-fill-color: transparent;
//   // -webkit-background-clip: text;
//   background-clip: text;
//   span {
//     // position: absolute;
//     background-image: linear-gradient(to bottom, #f00, #f00);
//     mix-blend-mode: overlay;
//     -webkit-text-fill-color: transparent;
//     background-clip: text;
//     &::before {
//       content: attr(data-text);
//     }
//   }
// }

@keyframes shine {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes animateBefore {
  0% {
    width: 28px;
  }
  25% {
    width: 100%;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}
@keyframes animateAfter {
  0% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1turn);
  }
  100% {
    transform: rotate(-1turn);
  }
}
@keyframes waveFlow {
  from {
    background-position-x: -10px, 0;
  }
  to {
    background-position-x:
      -30px,
      -20px;
  }
}
@keyframes m {
  0% {
    background-position:
      -200% 100%,
      -100% 100%,
      0% 100%,
      100% 100%,
      0% 100%,
      100% 100%,
      200% 100%,
      300% 100%;
  }
  100% {
    background-position:
      0% 100%,
      100% 100%,
      200% 100%,
      300% 100%,
      -200% 100%,
      -100% 100%,
      0% 100%,
      100% 100%;
  }
}
@keyframes s {
  0% {
    background-size:
      50.5% 60%,
      50.5% 60%,
      50.5% 60%,
      50.5% 60%,
      50.5% 90%,
      50.5% 90%,
      50.5% 90%,
      50.5% 90%;
  }
  33% {
    background-size:
      50.5% 70%,
      50.5% 70%,
      50.5% 70%,
      50.5% 70%,
      50.5% 75%,
      50.5% 75%,
      50.5% 75%,
      50.5% 75%;
  }
  66% {
    background-size:
      50.5% 55%,
      50.5% 55%,
      50.5% 55%,
      50.5% 55%,
      50.5% 80%,
      50.5% 80%,
      50.5% 80%,
      50.5% 80%;
  }
  100% {
    background-size:
      50.5% 90%,
      50.5% 90%,
      50.5% 90%,
      50.5% 90%,
      50.5% 95%,
      50.5% 95%,
      50.5% 95%,
      50.5% 95%;
  }
}
</style>
